<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>总线机制Bus/总线/发布订阅模式/观察者模式</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="app">
    <child content="Dell"></child>
    <child content="Lee"></child>
</div>

<script>
//    Vue原型绑定bus属性,为vue实例
    Vue.prototype.bus=new Vue()
    Vue.component('child',{
        //子组件无法修改父组件传递过来的值,用data将父组件传递过来的值赋给一个变量
        data: function () {
            return {
                selfContent:this.content
            }
        },
        //子组件接收父组件传递的值
        props:{
            content:String,

        },
        //子组件绑定点击事件
        template:'<div @click="handleClick">{{selfContent}}</div>',
        //定义点击事件
        methods:{
            handleClick: function () {
                //非父子组件之间传值
                //bus为vue实例,有$emit方法
                this.bus.$emit('change',this.selfContent)
            }
        },
        //生命周期钩子
        mounted: function () {
            var this_=this
            this.bus.$on('change', function (msg) {
//                这里的this不是组件
                this_.selfContent=msg
            })
        }
    })
    var vm = new Vue({
        el: "#app",
        data: {}
    })
</script>
</body>
</html>